<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
	String basePath = path  + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
		<a href="add.jsp">添加</a>
	<form action="" class="layui-form">
	<div class="layui-form-item">
	  <div class="layui-inline">
	    <label class="layui-form-label">姓名：</label>
	    <div class="layui-input-inline" >
	      <input type="text" id="staffname" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-inline">
	    <label class="layui-form-label">部门：</label>
	    <div class="layui-input-inline" style="width: 100px;">
	     <select name="" id="depts_search">
	     	<option value="-1">全部</option>
	     </select>
	    </div>
	  </div>
	   <div class="layui-inline">
	   <button type="button" class="layui-btn" onclick="reload002();">搜索</button>
	   </div>
</div>
	</form>
	<table id="attendTable" lay-filter="attend"></table>
	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
  </div>
	</script>
	<script type="text/javascript">
	
		function reload002(){
			layui.table.reload('attendTable',{
				where : {
					staffname: $("#staffname").val(),
					"department.deptId" : $("#depts_search").val()
				},
				page : {
					curr : 1
				}
			});
		}
	
		layui.use(['table','form'], function(){
			
			loadDepts();
			
			var table = layui.table;
			
			var form = layui.form;
			form.render();
		
			table.render({
				elem: '#attendTable',
				url : 'attend/list',
				page : true,
				toolbar: '#toolbarDemo',
				cols: [[ //表头
					{type:'checkbox'}
				      ,{field: 'attendId', title: 'ID', width:80, sort: true}
				      ,{field: 'sex', title: '性别', width:80, sort: true}
				      ,{field: 'staffname', title: '名称', width:80} 
				      ,{field: 'department.deptname', title: '部门', width: 177, templet:function(d){
				    	  if(d.department){
				    	 	 return d.department.deptname;
				    	  }
				    	  return '-';
				      }}
				      ,{field: 'attenddate', title: '考勤日期', width: 180, sort: true}
				      ,{field: 'attendin', title: '签到', width: 90, sort: true}
				      ,{field: 'attendout', title: '签退', width: 90}
				      ,{field: 'remark', title: '备注', sort: true}
				   ]]
			});
			
			//监听表格工具栏事件
			table.on('toolbar(attend)',function(obj){
				switch(obj.event){
					case 'batchDelete':
						batchDelete();
						break;
				}
			});
		});
		
		function batchDelete(){
			var checkStatus = layui.table.checkStatus('attendTable'); //idTest 即为基础参数 id 对应的值
			console.log(checkStatus.data);
			if(checkStatus.data.length == 0){
				layui.layer.msg('请选择要删除的数据');
				return;
			}
			
			layer.confirm('真的要删除吗?', {icon: 3, title:'提示'}, function(index){
				var deleteIds = [];
				$.each(checkStatus.data,function(){
					deleteIds.push(this.attendId);
				});
				
				//发送异步请求删除数据
				$.get("attend/delete",{"ids": deleteIds.join(",")}, function(data){
					reload002();
				});
			   layer.close(index);
			});
		}
		
		function loadDepts(){
			$.get('attend/listdept',function(data){
				$.each(data,function(){
					$("<option></option>").val(this.deptId).text(this.deptname).appendTo("#depts_search");
				});
				
				layui.form.render('select');
			});
		}
		
	</script>
</body>
</html>




